<div class="add-to-project middle surface-shaded">
  <div class="middle-content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-10">
          <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
          <div ng-show="!pvcs || !attach.resource">Loading...</div>

          <div ng-show="pvcs && !pvcs.length && attach.resource" class="empty-state-message empty-state-full-page text-center">
            <h2>No persistent volume claims.</h2>

            <p>
              A <b>persistent volume claim</b> is required to attach to this {{kind | humanizeKind}},
              but none are loaded on this project.
            </p>

            <div ng-if="project && (pvcVersion | canI : 'create')">
              <a ng-href="project/{{project.metadata.name}}/create-pvc"
                 class="btn btn-primary">Create Storage</a>
            </div>

            <p ng-if="project && !(pvcVersion | canI : 'create')">
              To claim storage from a persistent volume, refer to the documentation on <a target="_blank" ng-href="{{'persistent_volumes' | helpLink}}">using persistent volumes</a>.
            </p>

            <p ng-if="attach.resource"><a ng-href="{{attach.resource | navigateResourceURL}}">Back to {{kind | humanizeKind}} {{name}}</a></p>
          </div>

          <div ng-show="pvcs && pvcs.length && attach.resource" class="mar-top-xl">
            <h1>Add Storage to {{name}}</h1>
            <div class="help-block">
              Add an existing persistent volume claim to the template of {{kind | humanizeKind}} {{name}}.
            </div>
            <form name="attachPVCForm" class="mar-top-lg">
              <fieldset ng-disabled="disableInputs">
                <div class="form-group">
                  <label for="persistentVolumeClaim" class="required">Storage</label>
                  <table style="margin-bottom:0;background-color:transparent;" class="table table-condensed table-borderless">
                    <tbody>
                      <tr ng-repeat="pvc in pvcs track by (pvc | uid)">
                        <td style="padding-left:0;">
                          <input
                            type="radio"
                            name="persistentVolumeClaim"
                            ng-model="attach.persistentVolumeClaim"
                            ng-value="pvc"
                            ng-change="onPVCSelected()"
                            aria-describedby="pvc-help">
                        </td>
                        <td><a ng-href="{{pvc | navigateResourceURL}}" target="_blank">{{pvc.metadata.name}}</a></td>
                        <td ng-if="pvc.spec.volumeName">{{pvc.status.capacity['storage'] | usageWithUnits: 'storage'}}</td>
                        <td ng-if="!pvc.spec.volumeName">{{pvc.spec.resources.requests['storage'] | usageWithUnits: 'storage'}}</td>
                        <td>({{pvc.spec.accessModes | accessModes | join}})</td>
                        <td>
                          {{pvc.status.phase}}
                          <span ng-if="pvc.spec.volumeName">
                            to volume <strong>{{pvc.spec.volumeName}}</strong>
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div ng-if="!(project && (pvcVersion | canI : 'create'))" class="help-block">
                  Select storage to use.
                </div>
                <div ng-if="project && (pvcVersion | canI : 'create')" class="help-block">
                  Select storage to use<span ng-if="!outOfClaims"> or <a ng-href="project/{{project.metadata.name}}/create-pvc" >create storage</a>.</span>
                  <span ng-if="outOfClaims">. You cannot create new storage since you are at quota.</span>
                </div>

                <h3>Volume</h3>
                <div class="help-block">
                  Specify details about how volumes are going to be mounted inside containers.
                </div>

                <div class="form-group mar-top-xl">
                  <label for="mount-path">Mount Path</label>
                  <input
                      id="mount-path"
                      class="form-control"
                      type="text"
                      name="mountPath"
                      ng-model="attach.mountPath"
                      ng-pattern="/^\/.*$/"
                      osc-unique="existingMountPaths"
                      placeholder="example: /data"
                      autocorrect="off"
                      autocapitalize="none"
                      spellcheck="false"
                      aria-describedby="mount-path-help">
                  <div>
                    <span id="mount-path-help" class="help-block">Mount path for the volume inside the container. If not specified, the volume will not be mounted automatically.</span>
                  </div>
                  <div class="has-error" ng-show="attachPVCForm.mountPath.$error.pattern && attachPVCForm.mountPath.$touched">
                    <span class="help-block">
                      Mount path must be a valid path to a directory starting with <code>/</code>.
                    </span>
                  </div>
                  <div class="has-error" ng-show="attachPVCForm.mountPath.$error.oscUnique">
                    <span class="help-block">
                      Volume mount in that path already exists. Please choose another mount path.
                    </span>
                  </div>
                </div>

                <div class="form-group">
                  <label for="sub-path">Subpath</label>
                  <input
                      id="sub-path"
                      class="form-control"
                      type="text"
                      name="subPath"
                      ng-model="attach.subPath"
                      placeholder="example: application/resources"
                      ng-pattern="RELATIVE_PATH_PATTERN"
                      autocorrect="off"
                      autocapitalize="none"
                      spellcheck="false"
                      aria-describedby="sub-path-help">
                  <div id="sub-path-help" class="help-block">
                    Optional path within the volume from which it will be mounted into the
                    container. Defaults to the volume's root.
                  </div>
                  <div class="has-error" ng-show="attachPVCForm.subPath.$error.pattern && attachPVCForm.subPath.$touched">
                    <span class="help-block">
                      Path must be a relative path. It cannot start with <code>/</code> or
                      contain <code>..</code> path elements.
                    </span>
                  </div>
                </div>

                <div class="form-group">
                  <label for="volume-name">Volume Name</label>
                  <!--
                    Volume name must conform to a DNS label
                    https://github.com/kubernetes/kubernetes/blob/master/docs/design/identifiers.md
                    https://github.com/kubernetes/kubernetes/blob/d7a87c228506ed11240049ae95cbb4efb07fd178/pkg/util/validation/validation.go#L61-L70
                    Reuse the volume name and disable uniqueness validation if it's already mounted under another mount path / subpath.
                  -->
                  <input
                      id="volume-path"
                      class="form-control"
                      type="text"
                      name="volumeName"
                      ng-model="attach.volumeName"
                      ng-pattern="/^[a-z0-9]([-a-z0-9]*[a-z0-9])?$/"
                      ng-readonly="volumeAlreadyMounted"
                      osc-unique="existingVolumeNames"
                      osc-unique-disabled="volumeAlreadyMounted"
                      maxlength="63"
                      placeholder="(generated if empty)"
                      autocorrect="off"
                      autocapitalize="none"
                      spellcheck="false"
                      aria-describedby="volume-name-help">
                  <div>
                    <span id="volume-name-help" class="help-block">Unique name used to identify this volume. If not specified, a volume name is generated.</span>
                  </div>
                  <div class="has-error" ng-show="attachPVCForm.volumeName.$error.pattern && attachPVCForm.volumeName.$touched">
                    <span class="help-block">
                      Volume names may only contain lower-case letters, numbers, and dashes.
                      They may not start or end with a dash.
                    </span>
                  </div>
                  <div class="has-error" ng-show="attachPVCForm.volumeName.$error.maxlength">
                    <span class="help-block">
                      Volume names cannot be longer than 63 characters.
                    </span>
                  </div>
                  <div class="has-error" ng-show="attachPVCForm.volumeName.$error.oscUnique">
                    <span class="help-block">
                      Volume name already exists. Please choose another name.
                    </span>
                  </div>
                </div>

                <div class="form-group">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" ng-model="attach.readOnly" aria-describedby="read-only-help">
                      Read only
                    </label>
                    <div id="read-only-help" class="help-block">
                      Mount the volume as read-only.
                    </div>
                  </div>
                </div>

                <!-- Prompt for containers only if there is more than one. -->
                <div ng-if="attach.resource.spec.template.spec.containers.length > 1">
                  <div ng-if="attach.allContainers">
                    The volume will be mounted into all containers. You can
                    <a href="" ng-click="attach.allContainers = false">select specific containers</a>
                    instead.
                  </div>

                  <div ng-if="!attach.allContainers" class="form-group">
                    <label class="required">Containers</label>
                    <select-containers
                        ng-model="attach.containers"
                        pod-template="attach.resource.spec.template"
                        ng-required="true"
                        help-text="Add the volume to the selected containers.">
                    </select-containers>
                  </div>
                </div>

                <pause-rollouts-checkbox
                    ng-if="attach.resource | managesRollouts"
                    deployment="attach.resource">
                </pause-rollouts-checkbox>

                <div class="button-group gutter-top gutter-bottom">
                  <button type="submit"
                      class="btn btn-primary btn-lg"
                      ng-click="attachPVC()"
                      ng-disabled="attachPVCForm.$invalid || disableInputs || !attachPVC">Add</button>
                  <a class="btn btn-default btn-lg" role="button" ng-click="cancel()">Cancel</a>
                </div>
              </fieldset>
            </form>
          </div>
        </div><!-- /col-md-* -->
      </div>
    </div>
  </div><!-- /middle-content -->
</div><!-- /middle -->
